<template>
  <div class="app-container">
    <el-steps :active="active" process-status="finish" finish-status="success" simple>
      <el-step title="填写房源信息" />
      <el-step title="填写房屋配置" />
      <el-step title="填写费用信息" />
    </el-steps>

    <house-info-detail
      v-show="active == 0"
      v-model="houseInfo"
      @next="next"
    />
    <house-config-detail
      v-show="active == 1"
      v-model="houseInfo"
      @prev="prev"
      @next="next"
    />
    <house-cost-detail
      v-show="active == 2"
      v-model="houseInfo"
      @prev="prev"
      @finishCommit="finishCommit"
    />

  </div>
</template>

<script>
  import HouseInfoDetail from "./components/HouseInfoDetail"
  import HouseConfigDetail from "./components/HouseConfigDetail"
  import HouseCostDetail from "./components/HouseCostDetail"
  import {addHouse,getHouseInfo,updateHouse} from '@/api/basic/house';

  export default {
    components: {
      HouseInfoDetail,
      HouseConfigDetail,
      HouseCostDetail
    },
    data() {
      return {
        active: 0,
        isEdit: false,
        houseInfo: {
          // 标题
          title: "",
          // 房源类型
          type: "",
          room: "",
          hall: "",
          toilet: "",
          balcony: "",
          kitchen: "",
          villageId: null,
          // 小区名称
          villageName: "",
          address: "",
          zoneId: null,
          // 地铁id
          subway: null,
          // 地铁名称
          subwayName: "",
          // 房屋配置
          config: '',
          // 房屋亮点
          tags: '',
          decoration: "",
          state: null,
          rzDate: null,
          viewTime: "",
          ramark: "",
          // 房源图片
          housePics: '',
          housePicList: [],
          startMonth: "",
          endMonth: "",
          shortRent: null,
          money: null,
          serviceMoney: null,
          isagency: null,
          agencyMoney: null,
          payType: "",
          // 租客要求
          requirement: '',
          commission: null
        }
      }
    },
    created(){
      if(this.$route.query.id){
        this.isEdit = true;
        getHouseInfo(this.$route.query.id).then(response=>{
          this.houseInfo = response.data;
        });
      }
    },
    methods: {
      prev() {
        if (this.active > 0 && this.active < 3) {
          this.active--;
        }
      },
      next() {
        if (this.active < 3) {
          this.active++;
        }
      },
      finishCommit() {
        this.$confirm('是否要提交该房源', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.isEdit){
            updateHouse(this.$route.query.id,this.houseInfo).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
            });
          }else{
            addHouse(this.houseInfo).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              location.reload();
            });
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    width: 1200px;
    margin: 50px auto;
    border: 1px solid #eee;
  }
</style>
